<template>
  <div class="content">
    <div class="txbzDiv">
      <TitleVue :name="'通信保障'" />
      <div class="txbzContent">
        <div class="itemDiv" v-for="(item, index) in txbzList" :key="index" @mouseover="activeIndex = index" @mouseout="activeIndex = null">
          <img :src="getImg(index, item.name)" alt="" />
          <div class="rightDiv">
            <p :title="item.name">{{ item.name }}</p>
            <p>{{ item.status }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="wzbzDiv">
      <TitleVue :name="'物资保障'" />
      <div class="wzbzTable">
        <InfiniteScroll :height="'25vh'" :list="wzbzList" :ths="wzbzThs" />
      </div>
    </div>

    <div class="yazxDiv">
      <TitleVue :name="'预案执行'" />
      <div class="yazxContent">
        <div class="itemDiv" v-for="(item, index) in yazxList" :key="index" @mouseover="activeIndex2 = index" @mouseout="activeIndex2 = null">
          <img :src="getImg2(index, item.name)" alt="" />
          <div class="rightDiv">
            <p :title="item.name">{{ item.name }}</p>
            <p>
              <span>{{ item.val }}</span
              >{{ item.unit }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="cllxDiv">
      <TitleVue :name="'撤离路线'" />
      <div class="cllxContent">
        <InfiniteScroll :height="'20vh'" :list="bzRouteList" :ths="bzRouteThs" @handleItemClick="handleItemClick" />
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import InfiniteScroll from '@/components/infiniteScroll/index.vue'
import * as echarts from 'echarts'

export default {
  name: 'YaLeft',
  components: {
    TitleVue,
    InfiniteScroll
  },
  data() {
    return {
      activeIndex: null,
      activeIndex2: null,
      txbzList: [
        { name: '有线通信', status: '正常' },
        { name: '无线电台', status: '正常' },
        { name: '遥测系统', status: '正常' }
      ],
      wzbzList: [
        {
          name: '75KW柴油发电机',
          value: 1,
          unit: '台'
        },
        {
          name: '铅丝',
          value: 100,
          unit: 'T'
        },
        {
          name: '编织袋',
          value: 10000,
          unit: '条'
        },
        {
          name: '木材',
          value: 260,
          unit: 'm³'
        },
        {
          name: '救身衣',
          value: 300,
          unit: '件'
        },
        {
          name: '交通局准备汽车',
          value: 130,
          unit: '辆'
        }
      ],
      wzbzThs: [
        { name: '物资', flex: 8, property: 'name', isHighlight: false },
        { name: '数量', flex: 4, property: 'value', isHighlight: false },
        { name: '单位', flex: 4, property: 'unit', isHighlight: false }
      ],
      yazxList: [
        { name: '调度规程', val: 68, unit: '份' },
        { name: '应急预案', val: 72, unit: '份' },
        { name: '预案演练', val: 15, unit: '次' }
      ],
      bzRouteList: [
        {
          villName: '蔡庄村',
          safeName: '蔡庄避险点'
        }
      ],
      bzRouteThs: [
        { name: '起点', flex: 4, property: 'villName', isHighlight: false },
        { name: '终点', flex: 4, property: 'safeName', isHighlight: false }
      ],
      showBzlx: false
    }
  },
  mounted() {
    this.renderBarChart(this.bxdxAxis, this.bxdyAxis)
  },
  methods: {
    getImg(index, name) {
      var img = this.activeIndex == index ? name + '2' : name
      return require('@/assets/img/yuan/' + img + '.png')
    },
    getImg2(index, name) {
      var img = this.activeIndex2 == index ? name + '2' : name
      return require('@/assets/img/yuan/' + img + '.png')
    },
    handleItemClick() {
      this.showBzlx = !this.showBzlx
      this.$store.commit('changeBzlx', this.showBzlx)
    },
    renderBarChart(xAxis, yAxis) {
      let chartDom = document.getElementById('bxdfb')
      if (this.myChart) {
        this.myChart.dispose()
        chartDom.innerHTML = ''
      }
      this.myChart = echarts.init(chartDom, 'macarons')
      let option = {
        grid: {
          top: '10%',
          bottom: '10%',
          right: '0%',
          left: '8%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        },
        series: [
          {
            data: yAxis,
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#0389D6' },
                { offset: 1, color: '#FFFFFF' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0389D6' },
                  { offset: 1, color: '#FFFFFF' }
                ])
              }
            }
          }
        ]
      }

      option && this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .txbzDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .txbzContent {
      width: 100%;
      height: auto;
      padding: 0 1.2vw 1vh;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .itemDiv {
        width: 33%;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #00ffff;
        // img {
        //   width: 38%;
        // }
        .rightDiv {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 5px;
          p {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p:nth-child(2) {
            font-size: 1.7vh;
            padding-left: 5px;
            margin-bottom: 5px;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }
  }
  .wzbzDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .wzbzTable {
      padding: 0 1.2vw 1vh;
      box-sizing: border-box;
    }
  }
  .yazxDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .yazxContent {
      padding: 0 0.5vw 1vh;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
    }
    .itemDiv {
      width: 33%;
      display: flex;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.7vh;
      color: #00ffff;
      // img {
      //   width: 38%;
      // }
      .rightDiv {
        flex: 1;
        display: flex;
        margin-left: 5px;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        p:nth-child(1) {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          padding-left: 5px;
          margin-bottom: 5px;
          background: linear-gradient(to right, #0565a7, transparent);
        }
      }
    }
  }
  .cllxDiv {
    flex: 1;
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    .cllxContent {
      padding: 0 1.2vw 1vh;
      box-sizing: border-box;
    }
  }
}
</style>
